js常用小技巧黑科技 - javascript(js) commonly used skill

• 小数取整：

  1.234 | 0

  ~~1.234

  1.234 >> 0

• 妙用隐式转换：

  • 字符串转number:

    +'123'

  • new Date转时间戳：

    +new Date()

  • 数组/多维数组转为逗号分隔字符串(可用于多维数组转一维)：

    ""+[1, 2 , 3, 3, [2, 3, 4]]

• 解构：

  • 交换a,b的值：

    var a=1;
    var b=2;
    [a, b] = [b, a];
    console.log(a, b);

• 扩展运算符：

  • 取数组最大值/最小值：

    Math.max(...[1,2,3])
    Math.min(...[1,2,3])

  • 生成时间：

    new Date(...[2018,6,4])

  • 字符串转数组：

    method 1: 
    [...'string']
    
    method 2: 
    Array.from('string')

  • 合并对象：

    let obj1 = {a:1, b:2};
    let obj2 = {b:3, c:4};
  
    {...obj1, ...obj2}
      等同于
    Object.assign(obj1, obj2)

• 利用URL API获取url的query值

var url = new URL('http://localhost:8000/news?a=1&b=2&c=3');
var searchParams = url.searchParams;
for (let key of searchParams.keys()){
  console.log('====');
  console.log('key === ', key);
  console.log('value === ', searchParams.get(key))
}

• 常用方法：

  • 数字前补0：

    function preFixNum(num, length) {
      return (Array(length).join('0') + num).slice(-length);
    }

  • 数组元素为对象的去重：

    [...new Set(arr.map(v => JSON.stringify(v)))].map(v => JSON.parse(v))

  • 数组求和：

    var arr = [1,2,3,4,5];
    
    method 1: 
    var sum = eval(arr.join('+'));
    
    method 2: 
    var sum = arr.reduce((prev,cur) => prev + cur);

  • 金钱格式化(千分)：

    let money = 11111;
    
    method 1: 
    money.toLocaleString('en-US');
    
    method 2: 
    Intl.NumberFormat().format(money);
    
    method 3: 
    String(money).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

  • 短路逻辑代替if：

    isTrue && console.log(1);

  • RGB to Hex：

    function RGBtoHEX(rgb){
      return ((1<<24) + (rgb.r<<16) + (rgb.g<<8) + rgb.b).toString(16).substr(1);
    }

  • 延时函数:

  const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

  • 生成指定长度数组：

    Array.from(new Array(10).keys());

  • 快速创建a标签：

    let a = '超链接'.link('https://github.com/TigerHee/shareJS');
    console.log('a === ', a)

• 正则进阶：

  • 捕获括号：

    匹配 'tigerHee' 并且记住匹配项
    /(tigerHee)/

  • 非捕获括号：

    匹配 'tigerHee' 但是不记住匹配项
    /(?:tigerHee)/

  • 先行断言：

    匹配'tiger'仅仅当'tiger'后面跟着'Hee'
    /tiger(?=Hee)/

  • 后行断言：

    匹配'Hee'仅仅当'Hee'前面是'tiger'
    /(?<=tiger)Hee/

  • 正向否定查找：

    匹配'tiger'仅仅当'tiger'后面不跟着'java'
    /tiger(?!java)/

点击前往github获取更多知识点

谢谢您的star鼓励